<div class="subheader editor-toolbar" id="editor-header">
  <div class="fixed-container">
    <div class="btn-group">
      <div class="btn-toolbar pull-left" ng-cloak ng-controller="FormToolbarController">
        <button class="btn btn-inverse"
                id="{{item.id}}"
                ng-class="{'separator': item.type == 'separator'}"
                ng-click="toolbarButtonClicked($index)" ng-disabled="item.type == 'separator' || item.enabled == false"
                ng-repeat="item in items" ng-switch
                on="item.type"
                title="{{item.title | translate}}">

          <i class="toolbar-button" data-toggle="tooltip" ng-class="item.cssClass" ng-switch-when="button"
             title="{{item.title | translate}}"></i>

          <div ng-class="item.cssClass" ng-switch-when="separator"></div>
        </button>
      </div>
    </div>
    <div class="btn-group pull-right" ng-show="!secondaryItems.length">
      <div class="btn-toolbar pull-right" ng-controller="FormToolbarController">
        <button class="btn btn-inverse" id="{{item.id}}"
                ng-class="{'separator': item.type == 'separator'}" ng-click="toolbarSecondaryButtonClicked($index)"
                ng-disabled="item.type == 'separator'"
                ng-repeat="item in secondaryItems track by $index"
                ng-switch on="item.type"
                title="{{item.title | translate}}">
          <i class="toolbar-button" data-toggle="tooltip" ng-class="item.cssClass" ng-switch-when="button"
             title="{{item.title | translate}}"></i>

          <div ng-class="item.cssClass" ng-switch-when="separator"></div>
        </button>
      </div>
    </div>
  </div>
</div>
<div class="inset fixed-container form-palette" ng-mousedown="cancelEditing($event)">
  <div auto-height class="col-sm-2" style="overflow: auto;">
    <ul style="font-family: Arial, Regular;font-size: 17px;color: #323437;list-style: none;padding:0;">
      <li class="stencil-item" class="palette-entry"
          dnd-draggable="palletteElement"
          dnd-type="'width-1'"
          id="{{palletteElement.type}}"
          ng-model="draggedElement"
          ng-repeat="palletteElement in palletteElements"
          title="{{palletteElement.title}}">
        <img height="32" ng-src="{{palletteElement.icon}}" width="32"/>
        {{palletteElement.title}}
      </li>
    </ul>
  </div>
  <div class="col-sm-10" style="height:100%; overflow: auto;">
    <div class="center-pane">
      <div class="content">
        <div class="header clearfix">
          <h2>{{currentForm.name}}</h2>

          <div class="pull-left badge-wrapper">
            <span class="badge">{{'FORM-BUILDER.VERSION' | translate:currentForm}}</span>
            <span>&nbsp;&nbsp;{{'FORM-BUILDER.LAST-UPDATED' | translate:currentForm}}</span>
          </div>
        </div>
        <div class="tabs-wrapper">

          <div active-tab="formBuilder.activeTab" tab-control="tabs">
          </div>
          <div class="content-canvas-wrapper" id="canvasSection"
               ng-class="{'editing': editState.editing}"
               ng-show="formBuilder.activeTab == 'design'">

            <ul class="form-canvas content-canvas"
                dnd-after-drop="afterDropField(item,formItems,event)"
                dnd-allowed-types="['width-1']"
                dnd-drop="onFieldDrop(item, formItems, event, index)"
                dnd-list="formItems"
                style="min-height:400px; width: 100%">
              <li class="form-field-wrapper" dnd-draggable="field"
                  dnd-effect-allowed="move"
                  dnd-moved="onFieldMoved(field, formItems)"
                  dnd-type="'width-1'"
                  ng-repeat="field in formItems track by field._guid">
                <div class="canvas-element" draggable="true" drop="onFieldDrop(item, list, event, index)"
                     edit-state="editState"
                     form-builder-element
                     form-element="field" id="{{field._guid}}"
                     moved="onFieldMoved(item, list)">
                </div>
              </li>
            </ul>
          </div>

          <div class="detail-wrapper" ng-show="formBuilder.activeTab == 'outcome'">
            <div class="well">
              <p>{{'FORM-BUILDER.OUTCOMES.DESCRIPTION' | translate}}</p>

              <div class="radio">
                <label>
                  <input name="outcome" ng-model="model.useOutcomes" ng-value="false" type="radio">
                  {{'FORM-BUILDER.OUTCOMES.NO-OUTCOMES-OPTION' | translate}}
                </label>
              </div>
              <div class="radio">
                <label>
                  <input name="outcome" ng-model="model.useOutcomes" ng-value="true" type="radio">
                  {{'FORM-BUILDER.OUTCOMES.OUTCOMES-OPTION' | translate}}
                </label>
              </div>
            </div>
            <div ng-if="model.useOutcomes">
              <h4>{{'FORM-BUILDER.OUTCOMES.POSSIBLE-OUTCOMES' | translate}}</h4>

              <div class="clearfix" ng-repeat="outcome in currentOutcomes track by $index"
                   style="margin-bottom:5px">
                <div class="col-xs-8">
                  <input class="form-control" ng-model="outcome.name"
                         placeholder="{{'FORM-BUILDER.OUTCOMES.NEW-OUTCOME-PLACEHOLDER' | translate}}"
                         type="text">
                </div>
                <div class="col-xs-2">
                  <button class="btn btn-default" ng-click="removeOutcome($index)" ng-show="$index > 0"
                          style="width:110px">{{'FORM-BUILDER.OUTCOMES.REMOVE' | translate}}
                  </button>
                </div>
                <div class="col-xs-2">
                  <button class="btn btn-default" ng-click="addOutcome()"
                          ng-show="($index + 1) === currentOutcomes.length" style="width:110px">
                    {{'FORM-BUILDER.OUTCOMES.ADD' | translate}}
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

